<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		div{float:left;}
		.div1{
			width:200px;
			height:200px;
			background:#655;
			background-image: radial-gradient(tan 33%,transparent 0);
			background-size: 30px 30px;
		}
		/*   #81aa56 0, #81aa56 60%   ---->  这里其实有一个渐变，从蓝色渐变为蓝色，只不过看不出来。   */
		.div2{
			width:200px;
			height:200px;
			background:#655;
			background-image:
				radial-gradient(tan 30%,transparent 0),
					/*   tan :  #D2B48C   */
				radial-gradient(tan 30%, transparent 0);
			background-size:30px 30px;
			background-position:0 0, 15px 15px;
		}
		.div3{
			width:200px;
			height:200px;
			background : linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
			background-size: 30px 30px;
		}
		.div4{
			width:200px;
			height:200px;
			background : repeating-linear-gradient(45deg,#fb3,#fb3 15px,#58a 0,#58a 30px);
		}
		.div5{
			width:200px;
			height:200px;
			background: white;
			background-image:linear-gradient(90deg,
			rgba(200,0,0,.5)50%,transparent 0),
			linear-gradient(
				rgba(200,0,0,.5)50%,transparent 0);
			background-size:30px 30px;
		}
		.div6{
			width:200px;
			height:200px;
			background:#58a;
			background-image:
				linear-gradient(white 1px,transparent 0),
				linear-gradient(90deg,white 1px,transparent 0);
			background-size:30px 30px;
		}
		.div7{
			width:200px;
			height:200px;
			background:#58a;
			background-image:
				linear-gradient(white 1px,transparent 0),
				linear-gradient(90deg,white 1px,transparent 0),
				linear-gradient(hsla(0,0%,100%,.3)1px,
				transparent 0),
				linear-gradient(90deg,hsla(0,0%,100%,.3)1px,
				transparent 0);
			background-size: 75px 75px,75px 75px,
			15px 15px,15px 15px;
		}

	</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<div class="div7"></div>
</body>
</html>